import React from 'react';
//李鸿 查看已结业分组
import { Row, Col } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import Noxmfz from '../projectTeam/noxmfz';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};
const Demo1 = () => {
  const [form] = Form.useForm();

  const onGenderChange = (value: string) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
        return;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
        return;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
    }
  };

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item name="note" label="小组名称：" rules={[{ required: true }]}>
        <Select placeholder="请选择" onChange={onGenderChange} allowClear>
          <Option value="male">male</Option>
          <Option value="female">female</Option>
          <Option value="other">other</Option>
        </Select>
      </Form.Item>
      <Form.Item name="note" label="学号：" rules={[{ required: true }]}>
        <Input></Input>
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) =>
          prevValues.gender !== currentValues.gender
        }
      >
        {({ getFieldValue }) =>
          getFieldValue('gender') === 'other' ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          ) : null
        }
      </Form.Item>
      <Form.Item {...tailLayout}>
        <div style={{ float: 'left', width: '90px', marginLeft: '2px' }}>
          <Button type="primary" htmlType="submit">
            +新增成员
          </Button>
        </div>
        <div style={{ float: 'left', width: '90px', marginLeft: '15px' }}>
          <Button type="default" htmlType="submit">
            更新分组
          </Button>
        </div>
        <div style={{ float: 'left', width: '20px', marginLeft: '0px' }}>
          <Button type="default" htmlType="submit">
            批量删除
          </Button>
        </div>
      </Form.Item>
    </Form>
  );
};

const Demo2 = () => {
  const [form] = Form.useForm();

  const onGenderChange = (value: string) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
        return;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
        return;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
    }
  };

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item name="note" label="学员姓名：" rules={[{ required: true }]}>
        <Input></Input>
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) =>
          prevValues.gender !== currentValues.gender
        }
      >
        {({ getFieldValue }) =>
          getFieldValue('gender') === 'other' ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          ) : null
        }
      </Form.Item>
    </Form>
  );
};

const Demo3 = () => {
  const [form] = Form.useForm();

  const onGenderChange = (value: string) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
        return;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
        return;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
    }
  };

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };

  return (
    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, currentValues) =>
          prevValues.gender !== currentValues.gender
        }
      >
        {({ getFieldValue }) =>
          getFieldValue('gender') === 'other' ? (
            <Form.Item
              name="customizeGender"
              label="Customize Gender"
              rules={[{ required: true }]}
            >
              <Input />
            </Form.Item>
          ) : null
        }
      </Form.Item>
      <Form.Item {...tailLayout}>
        <div style={{ float: 'left', width: '50px', marginLeft: '5px' }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </div>
        <div style={{ float: 'left', width: '50px', marginLeft: '20px' }}>
          <Button type="default" htmlType="submit">
            重置
          </Button>
        </div>
      </Form.Item>
    </Form>
  );
};
{
  {
    /*
const columns = [
  {
    title: '小组名称',
    width: 100,
    dataIndex: 'rq',
    key: 'rq',
    fixed: 'left',
  },
  {
    title: '院系',
    width: 100,
    dataIndex: 'xmmc',
    key: 'xmmc',
    fixed: 'left',
  },
  {
    title: '专业',
    dataIndex: 'address',
    key: '1',
    width: 150,
  },
  {
    title: '年级',
    dataIndex: 'address',
    key: '2',
    width: 150,
  },
  {
    title: '班级',
    dataIndex: 'address',
    key: '3',
    width: 150,
  },
  {
    title: '班主任',
    dataIndex: 'address',
    key: '4',
    width: 150,
  },
  {
    title: '学员姓名',
    dataIndex: 'address',
    key: '5',
    width: 150,
  },
  {
    title: '学号',
    dataIndex: 'address',
    key: '6',
    width: 150,
  },
  {
    title: '身份证号码',
    dataIndex: 'address',
    key: '4',
    width: 150,
  },
  {
    title: '性别',
    dataIndex: 'address',
    key: '5',
    width: 150,
  },
  {
    title: '邮箱',
    dataIndex: 'address',
    key: '6',
    width: 150,
  },
  {
    title: '手机号',
    dataIndex: 'address',
    key: '4',
    width: 150,
  },
  {
    title: '项目角色',
    dataIndex: 'address',
    key: '5',
    width: 150,
  },
  {
    title: '设置组长',
    dataIndex: 'address',
    key: '6',
    width: 150,
  },

  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 200,
    render: (text, record) => (
      <Space size="middle">
        <a>删除</a>
        <a>更换分组</a>
      </Space>
    ),
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    rq: i,
    xmmc: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}*/
  }
}

const columns = [
  {
    title: 'Name',
    fixed: 'left',
    dataIndex: 'name',
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },

  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 200,
    render: (text, record) => (
      <Space size="middle">
        <a>删除</a>
        <a>更换分组</a>
      </Space>
    ),
  },
];

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
  },
];
//选择框
// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
    );
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};

const ckyjyfz = () => {
  const [selectionType, setSelectionType] = React.useState<
    'checkbox' | 'radio'
  >('checkbox');
  const [form] = Form.useForm();
  const onGenderChange = (value: string) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
        return;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
        return;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
    }
  };

  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  const onSubmit = (value: any) => {
    //获取老师姓名
    console.log(value);
    //发送网络请求
  };
  return (
    <div>
      <Form onFinish={onSubmit} {...formItemLayout}>
        <div style={{ width: '300px', float: 'left' }}>
          <Noxmfz />
        </div>

        <div style={{ marginLeft: '20px', width: '800px', float: 'left' }}>
          <div>
            <div style={{ marginLeft: '8px', float: 'left', width: '300px' }}>
              <Form.Item
                name="note"
                label="小组名称："
                rules={[{ required: true }]}
              >
                <Select
                  placeholder="请选择"
                  onChange={onGenderChange}
                  allowClear
                >
                  <Option value="male">male</Option>
                  <Option value="female">female</Option>
                  <Option value="other">other</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="note"
                label="学号："
                rules={[{ required: true }]}
              >
                <Input></Input>
              </Form.Item>
            </div>
            <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
              <Form.Item
                name="note"
                label="学员姓名："
                rules={[{ required: true }]}
              >
                <Input></Input>
              </Form.Item>
            </div>

            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '10px' }}
                >
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </div>
              </Form.Item>
            </div>
            <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
              <Form.Item {...tailLayout}>
                <div
                  style={{ float: 'left', width: '50px', marginLeft: '30px' }}
                >
                  <Button type="default" htmlType="submit">
                    重置
                  </Button>
                </div>
              </Form.Item>
            </div>

            <div style={{ clear: 'left', width: '50px' }}></div>
          </div>
        </div>
      </Form>

      <div style={{ marginLeft: '20px', width: '800px', float: 'left' }}>
        <div
          style={{
            marginLeft: '8px',
            float: 'left',
            height: '50px',
            width: '99%',
            backgroundColor: '#ebf6f7 ',
          }}
        >
          <div style={{ marginTop: '8px' }}>
            <Button type="text">已选择XX项</Button>
            <Button type="link">清空</Button>
          </div>
        </div>
        <div style={{ marginLeft: '8px' }}>
          <Table
            rowSelection={{
              type: selectionType,
              ...rowSelection,
            }}
            columns={columns}
            dataSource={data}
            scroll={{ x: 1500, y: 300 }}
          />
        </div>
      </div>
    </div>
  );
};

export default ckyjyfz;
